@extends('admin.base')
<!--商品列表-->
@section('content')
    <div class="layui-card">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form">
                <div class="layui-input-inline">
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="title" id="title" placeholder="请输入商品名" value="{{ $_GET['title'] ?? '' }}" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select name="status" id="status">
                        <option value="">请选择状态</option>
                        <option value="1" @if(isset($_GET['status']) && $_GET['status'] == 1) selected @endif>在售</option>
                        <option value="2" @if(isset($_GET['status']) && $_GET['status'] == 2) selected @endif>已下架</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="is_banner" id="is_banner">
                        <option value="">是否首页轮播</option>
                        <option value="1" @if(isset($_GET['is_banner']) && $_GET['is_banner'] == 1) selected @endif>首页轮播</option>
                        <option value="2" @if(isset($_GET['is_banner']) && $_GET['is_banner'] == 2) selected @endif>非首页轮播</option>
                    </select>
                </div>
                <button class="layui-btn" id="searchBtn">搜 索</button>
                <span style="margin-left: 50px;">
                    @can('product.create')
                        <a class="layui-btn" href="{{route('product.create')}}">添 加</a>
                    @endcan
                    {{--@can('product.destroy')
                        <button class="layui-btn layui-btn-danger" id="listDelete">删 除</button>
                    @endcan--}}
                </span>
            </div>
        </div>
        <div class="layui-card-body">
            <table id="dataTable" lay-filter="dataTable"></table>
            <script type="text/html" id="options">
                <div class="layui-btn-group">
                    @can('product.soft_delete')
                        @{{# if(!d.deleted_at) { }}
                        <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="soft_delete">下架</a>
                        @{{# } }}
                    @endcan
                    @can('product.restore')
                        @{{# if(d.deleted_at) { }}
                        <a class="layui-btn layui-btn-warm layui-btn-sm" lay-event="restore">上架</a>
                        @{{# } }}
                    @endcan
                    @can('product.edit')
                        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                    @endcan
                    @can('product.destroy')
                        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
                    @endcan
                </div>
            </script>
            {{--封面图点击效果--}}
            <script type="text/html" id="cover">
                @{{#  if(d.cover){ }}
                <a href="@{{d.cover}}" target="_blank" title="点击查看">
                    <img src="@{{d.cover}}" alt="" width="100%">
                </a>
                @{{#  } }}
            </script>
            {{--轮播图点击效果--}}
            <script type="text/html" id="images">
                @{{#  layui.each(d.images, function(index, item){ }}
                <a style="margin-right: 10px;" href="@{{ item }}" target="_blank" title="点击查看">
                    <img src="@{{ item }}" alt="" width="28" height="28">
                </a>
                @{{# }); }}
            </script>
            {{--规格型号--}}
            <script type="text/html" id="skus">
                @{{#  layui.each(d.skus, function(index, item){ }}
                <p>@{{  item.title }}  &nbsp;原价:@{{ item.origin_price }} &nbsp; 售价:@{{ item.sold_price }} &nbsp; 库存:@{{ item.stock }} &nbsp; 真实销量:@{{ item.real_sold_num}} &nbsp; @{{ item.deleted_at==null ? '在售' : '已下架' }}</p>
                @{{# }); }}
            </script>
            {{--栏目--}}
            <script type="text/html" id="cate">
                @{{ d.cate.name }}
            </script>
        </div>
    </div>
@endsection

@section('script')
    <script>
        layui.use(['layer', 'table', 'form'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            //商品表格初始化
            var dataTable = table.render({
                elem: '#dataTable'
                , autoSort: false
                , height: 'auto'
                , url: "{{ route('product.data') }}" //todo 带上原始筛选参数和分页参数
                , where: {
                    type: $("#type").val(), title: $("#title").val(), status: $("#status").val(),
                    miaosha_top: $("#miaosha_top").val(),store_id: $("#store").val(),help_type: $("#help_type").val()
                }
                , page: true //开启分页
                ,limit: 30
                , cols: [[ //表头
                    {field: 'title', title: '名称', width: 120}
                    , {field: 'cate', title: '分类',width:80,templet:function (d) {
                            return d.category ? d.category.name : '';
                        }}
                    , {field: 'cover', title: '缩略图',toolbar: '#cover', width: 120}
                    // , {field: 'images', title: '轮播图',toolbar: "#images",width:150}
                    , {field: 'skus', title: '规格型号',toolbar:'#skus',width:520}
                    /*, {field: 'p_rate', title: '一级分润',width:100,templet:function (d) {
                        return d.p_rate ? d.p_rate + " %" : 0;
                      }}
                    , {field: 'p_p_rate', title: '二级分润',width:100,templet:function (d) {
                        return d.p_p_rate ? d.p_p_rate + " %" : 0;
                        }}*/
                    , {field: 'sort', title: '排序',width:50}

                    , {field: 'created_at', title: '创建时间',width:120,templet:function (d) {
                            return d.created_at.substr(0,16);
                        }}
                    , {field: 'deleted_at',title: "状态",width:50,templet:function (d) {
                            var nowDate = new Date();
                            var nowTime = nowDate.getTime() / 1000;
                            var miaoshaStart = new Date(d.miaosha_start).getTime() / 1000;
                            var miaoshaEnd = new Date(d.miaosha_end).getTime() / 1000;
                            if (d.deleted_at) {
                                return '已下架';
                            }else {
                                return '在售';
                            }
                        }}
                    , {'title': '操作', align: 'center', toolbar: '#options'}
                ]]
            });

            //监听工具条
            table.on('tool(dataTable)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'del') {
                    layer.confirm('确认删除 <strong>' + data.title + '下所有规格型号</strong> 吗？删除后不可找回！', {offset: '100px'},function (index) {
                        layer.close(index);
                        var load = layer.load();
                        $.post("{{ route('product.destroy') }}", {
                            _method: 'delete',
                            ids: [data.id]
                        }, function (res) {
                            layer.close(load);
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1}, function () {
                                    obj.del();
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }
                        });
                    });
                } else if (layEvent === 'edit') {
                    //todo  不能写死
                    //todo  跳转到编辑页面时带上查询条件和分页参数，以便编辑完成之后再跳转回编辑页面
                    var backUrl = '{{ route('product.index') }}' + '?type=' + $("#type").val() + '&title=' + $("#title").val() + '&status=' + $("#status").val();
                    backUrl += '&miaosha_top=' + $("#miaosha_top").val() + '&store_id=' + $("#store").val() + '&help_type=' + $("#help_type").val();
                    //带上分页参数
                    backUrl += '&page=' + dataTable.config.page.curr + '&limit=' + dataTable.config.page.limit;
                    backUrl = encodeURIComponent(backUrl)

                    location.href = '/product/' + data.id + '/edit?backUrl=' + backUrl;
                } else if (layEvent == 'soft_delete') {//下架
                    layer.confirm('确认下架 <strong>' + data.title + '</strong> 吗？其下所有规格型号商品均会下架。',{offset: '100px'}, function (index) {
                        layer.close(index);
                        var load = layer.load();
                        $.post("{{ route('product.soft_delete') }}", {
                            _method: 'delete',
                            ids: [data.id]
                        }, function (res) {
                            layer.close(load);
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1,time:2000}, function () {
                                    window.location.reload();
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }
                        });
                    });
                }else if(layEvent == 'restore') {//上架
                    layer.confirm('确认上架 <strong>' + data.title + '</strong> 吗？其下所有规格型号商品均会上架。', {offset: '100px'},function (index) {
                        layer.close(index);
                        var load = layer.load();
                        $.post("{{ route('product.restore') }}", {
                            _method: 'delete',
                            ids: [data.id]
                        }, function (res) {
                            layer.close(load);
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1,time: 2000}, function () {
                                    window.location.reload();
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }
                        });
                    });
                }
            });

            //按钮批量删除
            $("#listDelete").click(function () {
                //选中商品id
                var ids = [];
                //选中商品名
                var titles = [];
                var hasCheck = table.checkStatus('dataTable');
                var hasCheckData = hasCheck.data;
                if (hasCheckData.length > 0) {
                    $.each(hasCheckData, function (index, element) {
                        ids.push(element.id);
                        titles.push(element.title);
                    });
                }

                if (ids.length > 0) {
                    var titles = '<strong>' + titles.join('，') + '</strong>';
                    layer.confirm('商品 ' + titles + ' 删除后无法找回，确认删除吗？',{offset: '100px'}, function (index) {
                        layer.close(index);
                        var load = layer.load();
                        $.post("{{ route('product.destroy') }}", {
                            _method: 'delete',
                            ids: ids
                        }, function (res) {
                            layer.close(load);
                            if (res.code == 0) {
                                layer.msg(res.msg, {icon: 1}, function () {
                                    dataTable.reload({page: {curr: 1}});
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2})
                            }
                        });
                    });
                } else {
                    layer.msg('请选择删除项', {icon: 2})
                }
            })

            //行单击事件,当前行添加额外样式
            table.on('row(dataTable)',function (obj) {
                $(".layui-table-body tr ").attr({"style":"background:#FFFFFF"});//其他tr恢复原样
                $(obj.tr.selector).attr({"style":"background:#dbefdb"});//改变当前tr颜色
            })
            //搜索
            $("#searchBtn").click(function () {
                var type = $("#type").val();
                var title = $("#title").val();
                var status = $("#status").val();
                var miaosha_top = $("#miaosha_top").val();
                var store_id = $("#store").val();
                var help_type = $("#help_type").val();
                dataTable.reload({
                    where: {
                        type: type, title: title, status: status,miaosha_top: miaosha_top,
                        store_id:store_id,help_type:help_type
                    },
                    page: {curr: 1}
                })
            })
        })
    </script>
    <style>
        /*表格内容高度自适应*/
        .layui-table-cell {
            height: auto;
            padding: 0 0;
        }
    </style>
@endsection
